<template>
    <div>
        <h2>pinia setup</h2>
        <!-- 直接用 -->
        <!-- <p>{{ store.b }}</p>
        <p>{{ store.doubleB }}</p>
        <p>{{ store.tripleB }}</p> -->

        <!-- 解构 -->
        <p>{{ b }}</p>
        <p>{{ doubleB }}</p>
        <p>{{ tripleB }}</p>
        <p><button @click="addB">addB</button></p>
        <p><button @click="addB_Async">addB_Async</button></p>
    </div>
</template>

<script setup>
    // 组合式 
    // import { toRefs } from "vue";
    import { storeToRefs} from 'pinia'
    import {useBStore } from "@/stores/b.js";

    let store = useBStore();
    console.log(store);

    // 不能对属性直接使用解构 (方法没有问题)
    // let b = store.b  => b不是响应式的
    // let {b,doubleB,tripleB} = store;  //store => proxy对象 ->解构后直接对应属性解构
    // let {addB,addB_Async} = store;


    // 为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。请注意，你可以直接从 store 中解构 action

    // var res = storeToRefs(store);
    // console.log(res);

    var {b,doubleB,tripleB} = storeToRefs(store);
    console.log(b,doubleB,tripleB);
    console.log(b.value,doubleB.value,tripleB.value);
    var {addB,addB_Async} = store;

</script>

<style lang="scss" scoped>

</style>